<template>
  <div class="recharge">
    <header>
      <span @click="go_mine">←</span>
      <span>账单</span>
    </header>
    <h2 style="margin-left: 15px">在线充值</h2>
    <div class="box">
      <div>
        <span>余额</span>
        <br />
        <span>￥53.29</span>
      </div>
      <div>
        <p>冻结余额 ￥0.00</p>
        <p>赠额 ￥0.00</p>
        <p>本金 ￥53.29</p>
      </div>
    </div>
    <div class="money">
      <ul>
        <li class="active">30元</li>
        <li>50元</li>
        <li>100元</li>
        <li>300元</li>
        <li>1000元</li>
        <li>5000元</li>
      </ul>
      <div>实际到账：<span>30.00元</span></div>
    </div>
    <div class="footer">
      <ul>
        <li>
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608137818237&di=74da2fac1c972be19590fecb18f8f839&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F56%2F49%2F02%2F57341a880be8f.png"
          />
          <span>支付宝</span>
          <span>
            <van-checkbox v-model="checked"></van-checkbox>
          </span>
        </li>
        <li>
          <img
            src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3243742975,3971594754&fm=26&gp=0.jpg"
          />
          <span>微信</span>
          <span>
            <van-checkbox v-model="checked"></van-checkbox>
          </span>
        </li>
        <li>
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608138738657&di=88215fcdb735d6dcc61f06de0848db43&imgtype=0&src=http%3A%2F%2Fimg.51miz.com%2FElement%2F00%2F20%2F02%2F54%2F8d49e6e5_E200254_810d1d35.png%2521%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue%2Fformat%2Fpng"
          />
          <span>银行卡</span>
          <span>
            <van-checkbox v-model="checked"></van-checkbox>
          </span>
        </li>
      </ul>
    </div>
    <van-button type="primary" size="large" class="btn">去充值</van-button>
  </div>
</template>

<script>
export default {
  name: "recharge",
  data() {
    return {
      checked: false,
    };
  },
  methods:{
    go_mine(){
      this.$router.push('/home/mine')
    }
  }
};
</script>

<style>
.recharge {
  width: 100%;
  height: 100%;
  background: whitesmoke;
}
header {
  width: 100%;
  height: 50px;
}
header span:nth-last-of-type(2) {
  float: left;
  margin-left: 5px;
  font-size: 30px;
}
header span:nth-last-of-type(1) {
  float: right;
  margin-right: 5px;
  font-size: 20px;
}
.box {
  width: 90%;
  height: 100px;
  border: 1px solid #87C9FE;
  background: #87C9FE;
  margin: 0 auto;
  margin-top: 20px;
  color: white;
}
.box div {
  float: left;
  margin-left: 20px;
  margin-top: 20px;
}
.box div:nth-last-of-type(2) span:nth-last-of-type(1) {
  float: left;
  font-size: 30px;
  margin-top: 10px;
}
.box div:nth-last-of-type(1) > p {
  margin-bottom: 10px;
}
.box div:nth-last-of-type(1) {
  margin-left: 80px;
}
.money {
  width: 90%;
  height: 100px;
  margin: 0 auto;
  margin-top: 20px;
}
.money ul > li {
  width: 80px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  line-height: 50px;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
}
.money ul > li.active {
  color: #87C9FE;
  border: 1px solid #87C9FE;
}
.money div {
  font-size: 20px;
  position: fixed;
  right: 20px;
  top: 368px;
}
.money div > span {
  color: #87C9FE;
}
.footer {
  margin: 0 auto;
  width: 90%;
  height: 150px;
  margin-top: 100px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.footer img {
  width: 30px;
  height: 30px;
}
.footer ul > li {
  width: 100%;
  height: 30px;
  margin-top: 15px;
  text-align: center;
  line-height: 30px;
}
.footer ul > li img {
  float: left;
}
.footer ul > li span:nth-of-type(1) {
  float: left;
  margin-left: 5px;
  font-size: 20px;
}
.footer ul > li span:nth-of-type(2) {
  float: right;
  margin-right: 5px;
}
.btn {
  background: #87C9FE;
  border: 0;
  width: 90%;
  margin-left: 20px;
  margin-top: 100px;
}
</style>